<template>
  <div class="app-container task-mine">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container">
      <Tabs
        v-model="tabTaskStatus"
        @on-click="getTaskMyApproval()"
      >
        <TabPane
          label="全部"
          name=""
        >
        </TabPane>
        <TabPane
          label="待审批"
          name="1"
        >
        </TabPane>
        <TabPane
          label="已通过"
          name="3"
        >
        </TabPane>
        <TabPane
          label="已拒绝"
          name="5"
        >
        </TabPane>
      </Tabs>

      <Table
        stripe
        :loading="dataTable.loading"
        :border="dataTable.border"
        :columns="dataTable.columns"
        :data="dataTable.data"
      >
        <template
          slot-scope="{row,index}"
          slot="action"
        >
          <div
            class="btn-table-box"
            v-if="row.freezeType === 1"
          >
            <div
              class="btn-text-blue"
              @click="showEditorUser(row)"
            >编辑</div>
            <div>
              <Poptip
                confirm
                width="200"
                placement="top-end"
                :title="'确定要重置'+row.name+'密码？'"
                @on-ok="resetUserPwd(row)"
                @on-cancel=""
              >
                <div class="btn-text-blue">重置密码</div>
              </Poptip>
            </div>
            <Poptip
              confirm
              width="200"
              placement="top-end"
              :title="'你确定让'+row.name+'离职么？'"
              @on-ok="liveUser(row)"
              @on-cancel=""
            >
              <div class="btn-text-blue">离职</div>
            </Poptip>
          </div>
          <div v-else>
            -
          </div>
        </template>
      </Table>

      <Row class="mtop20">
        <Col
          :md="4"
          class="flex-start-center height-30 page"
        >
        <div>
          共{{count}}条
          <Select
            v-model="limit"
            size="small"
            class="lz-select-width"
            @on-change="changePageSize(1)"
          >
            <Option
              v-for="item in pageSizeSeletc"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </div>
        </Col>
        <Col
          :md="12"
          class="flex-center-center height-30"
        >
        <Page
          v-if="pageshow"
          :total="count"
          :page-size="limit"
          @on-change="changePageSize"
          size="small"
          show-elevator
        />
        </Col>
      </Row>
    </div>
    <Modal
      v-model="urlsModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <div class="modal-header">
          <span>下载文档</span>
          <a @click="closeModal()">
            <svg-icon icon-class="close" />
          </a>
        </div>
        <div class="modal-body">
          <template v-for="url in urls">
            <a
              class="url"
              :href="url.fileUrl"
            >
              {{url.fileName}}
            </a>
          </template>

        </div>
      </div>
    </Modal>
    <Modal
      v-model="errorModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="errorForm"
          :model="errorForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>拒绝通过原因</span>
            <a @click="closeModal()">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <Button
              class="error-btn"
              :class="[errorIndex===index ? 'error-btn-checked' : '']"
              @click="changeErrorBtn(index,error.description)"
              v-for="(error,index) in errorBtnSelect"
              :key="index"
            >
              {{error.description}}
            </Button>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal()">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitErrorDescription()"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { fetchTaskMyApproval, fetchTaskAudit } from "@/api/table";
import { Pagetitle } from "@/components";
import format from "date-format";
export default {
  data() {
    return {
      pageshow: true,
      //总页码
      count: 0,
      //页码
      currentPage: 1,
      //总条数
      limit: 10,
      pageSizeSeletc: [
        {
          value: 10,
          label: "10条/页"
        },
        {
          value: 20,
          label: "20条/页"
        }
      ],
      dataTable: {
        loading: false,
        border: false,
        columns: [
          {
            minWidth: 100,
            title: "任务ID",
            key: "taskId"
          },
          {
            minWidth: 100,
            title: "姓名",
            key: "name"
          },
          {
            minWidth: 100,
            title: "品牌",
            key: "brandName"
          },
          {
            minWidth: 100,
            title: "成本中心",
            key: "costCenterName"
          },
          {
            minWidth: 100,
            title: "一级物料",
            key: "firstMaterialName"
          },
          {
            minWidth: 100,
            title: "二级物料",
            key: "secondMaterialName"
          },
          {
            minWidth: 100,
            title: "任务类型",
            key: "addUpdate"
          },
          {
            minWidth: 100,
            title: "物料数量",
            key: "materialCount"
          },
          {
            minWidth: 100,
            title: "完成时间",
            key: "finishTime",
            render: (h, params) => {
              return h(
                "div",
                format("yyyy-MM-dd", new Date(params.row.finishTime))
              );
            }
          },
          {
            minWidth: 100,
            title: "录入时间",
            key: "createTime",
            render: (h, params) => {
              return h(
                "div",
                format("yyyy-MM-dd", new Date(params.row.createTime))
              );
            }
          },
          {
            minWidth: 100,
            title: "文档",
            key: "fileList",
            render: (h, params) => {
              if (params.row.fileList.length > 0) {
                return h(
                  "Button",
                  {
                    props: {
                      type: "text",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        if (params.row.fileList.length === 1) {
                          const href = params.row.fileList[0].fileUrl;
                          window.open(href, "_blank");
                        } else {
                          this.urlsModal = true;
                          this.urls = params.row.fileList;
                        }
                      }
                    }
                  },
                  "查看"
                );
              } else {
                return h("Span", "空");
              }
            }
          },
          {
            minWidth: 120,
            title: "操作",
            key: "action",
            render: (h, params) => {
              if (params.row.taskStatus === 1) {
                return h(
                  "div",
                  {
                    class: "btn-table-box"
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "text",
                          size: "small"
                        },
                        on: {
                          click: () => {
                            this.errorForm.taskId = params.row.taskId;
                            this.errorForm.taskStatus = 5;
                            this.errorModal = true;
                          }
                        }
                      },
                      "拒绝"
                    ),
                    h(
                      "Button",
                      {
                        props: {
                          type: "text",
                          size: "small"
                        },
                        on: {
                          click: () => {
                            this.taskAudit(params.row);
                          }
                        }
                      },
                      "通过"
                    )
                  ]
                );
              } else {
                let typeClass;
                let typeText;
                if (params.row.taskStatus === 3) {
                  typeClass = "type_3";
                  typeText = "已通过";
                  return h(
                    "div",
                    {
                      class: typeClass
                    },
                    typeText
                  );
                } else if (params.row.taskStatus === 5) {
                  typeClass = "type_5";
                  typeText = "已拒绝";
                  return h("div", [
                    h(
                      "div",
                      {
                        class: typeClass
                      },
                      typeText
                    ),
                    h(
                      "div",
                      {
                        class: typeClass
                      },
                      "(" + params.row.description + ")"
                    )
                  ]);
                }
              }
            }
          }
        ],
        data: []
      },
      pageTitle: {
        title: "我的审批"
      },
      tabTaskStatus: "",
      urlsModal: false,
      urls: [],
      ruleValidate: {
        brandId: [
          {
            required: true,
            message: "选择品牌",
            trigger: "change",
            type: "number"
          }
        ],
        costCenterId: [
          {
            required: true,
            message: "选择成本中心",
            trigger: "change",
            type: "number"
          }
        ],
        firstMaterial: [
          {
            required: true,
            message: "选择一级物料",
            trigger: "change"
          }
        ],
        materialId: [
          {
            required: true,
            message: "选择二级物料",
            trigger: "change",
            type: "number"
          }
        ]
      },
      //下载
      uploadList: [],
      errorIndex: "",
      errorBtnSelect: [
        {
          description: "完成时间有误"
        },
        {
          description: "数量有误"
        },
        {
          description: "品牌有误"
        },
        {
          description: "物料有误"
        },
        {
          description: "成本中心有误"
        },
        {
          description: "文档有误"
        }
      ],
      errorModal: false,
      errorForm: {
        taskId: "",
        taskStatus: "",
        description: ""
      }
    };
  },
  components: {
    Pagetitle
  },
  mounted() {
    this.getTaskMyApproval();
  },
  methods: {
    //分页
    changePageSize(index) {
      this.currentPage = index;
      this.getTaskMyApproval();
    },
    btnFun() {
      this.addBrandModal = true;
    },
    async getTaskMyApproval() {
      let status;
      if (this.tabTaskStatus === 0) {
        status = "";
      } else {
        status = this.tabTaskStatus;
      }
      const res = await fetchTaskMyApproval({
        pageNo: this.currentPage,
        pageSize: this.limit,
        userId: this.userId,
        taskStatus: status
      });
      this.count = res.data.total;
      this.dataTable.data = [];
      res.data.list.forEach(item => {
        const data = {};
        data.taskId = item.taskId;
        data.name = item.name;
        data.brandName = item.brandName;
        data.brandId = item.brandId;
        data.costCenterName = item.costCenterName;
        data.costCenterId = item.costCenterId;
        data.firstMaterialName = item.firstMaterialName;
        data.secondMaterialName = item.secondMaterialName;
        data.materialId = item.materialId;
        data.materialCount = item.materialCount;
        data.finishTime = item.finishTime;
        data.fileList = item.fileList;
        data.createTime = item.createTime;
        data.taskStatus = item.taskStatus;
        data.description = item.description;
        data.taskId = item.taskId;
        data.addUpdate = item.addUpdate
        this.dataTable.data.push(data);
      });
    },
    async taskAudit(info) {
      if (info) {
        this.errorForm.taskId = info.taskId;
        this.errorForm.taskStatus = "3";
      }
      await fetchTaskAudit({
        taskId: this.errorForm.taskId,
        taskStatus: this.errorForm.taskStatus,
        description: this.errorForm.description
      });
      this.getTaskMyApproval();
      this.$Message.success("提交成功");
    },
    showErrorModal() {
      this.errorModal = true;
    },

    resetForm(name) {
      this.$refs[name].resetFields();
    },
    closeModal(name) {
      if (name) {
        this.resetForm(name);
      }
      this.errorModal = false;
      this.urlsModal = false;
    },
    handleSubmitErrorDescription() {
      if (this.errorIndex >= 0) {
        this.taskAudit();
        this.errorModal = false;
      } else {
        this.$Message.error("请选择原因");
      }
    },
    changeErrorBtn(index, des) {
      this.errorIndex = index;
      this.errorForm.description = des;
    }
  },
  computed: {
    ...mapGetters(["userId"])
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.url {
  display: inline-block;
  margin: 0 10px;
}
.upload-tips {
  margin-left: 10px;
}
.upload-file {
  span {
    margin-right: 10px;
  }
}
.error-btn {
  border: 1px solid #ccc;
  color: #ccc;
  margin: 10px 10px 0 0;
}
.error-btn-checked {
  border-color: @primary-color;
  color: @primary-color;
}
</style>
<style >
.task-mine .ivu-tabs {
  overflow: visible;
}
.type_1 {
  color: #5c5959;
}
.type_3 {
  color: #cbc9c9;
}
.type_5 {
  color: #cb2d00;
}
</style>